<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import RecordDialog from "@/views/components/RecordDialog.vue";

const props = defineProps<{
  records:Record<string, any>
}>();
const isVisible = ref<boolean>(false);
const showDetails = () =>{
  isVisible.value=true;
}
</script>

<template>
  <div>
    <RecordDialog v-if="isVisible" title="基础信息" :records="records" v-model:visible="isVisible"></RecordDialog>
    <div class="item-title"><el-link type="primary" :underline="false" @click="showDetails">基础信息</el-link></div>
    <el-descriptions border :column="4" direction="vertical" class="custom-descriptions">
      <el-descriptions-item>
        <template #label>
          <div class="item-label">主节点</div>
        </template>
        <div class="item-value">
          {{records["name"]}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="item-label">集群名称</div>
        </template>
        <div class="item-value">
          {{records["cluster_name"]}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="item-label">UUID</div>
        </template>
        <div class="item-value">
          {{records["cluster_uuid"]}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="item-label">版本</div>
        </template>
        <div class="item-value">
          {{records['version.number']}}
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<style scoped>

.item-title{
  color: var(--el-text-color-primary);
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
}
.item-label {
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

.item-value {
  width: 222px;
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
  font-weight: bold;
}
</style>